<template>
  <div class="parent">
    <h1 class="red">样式模块化</h1>
    <hr />
    <Child></Child>
  </div>
</template>

<script>
import Child from "./components/样式模块化子组件.vue";
export default {
  components: {
    Child,
  },
};
</script>

<style scoped>
.red {
  color: red;
}
/* 样式模块化下，在父组件中控制子组件样式，再控制子组建的样式前要加/deep/ */
.parent /deep/ .content {
  color: purple;
  border: 2px solid pink;
}
/* 存在一个例外，因为默认子组件的根元素，会带上父组件的data-v-hash属性，所以可以直接控制 */
.parent .child {
  border: 10px solid yellow;
}
</style>